<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>各种方式选显卡</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			/*a链接选项卡*/
			.box1{float:left;width:300px;height:324px;margin-right:50px;}
			.box1 h2{text-align:center;line-height:1em;}
			.wrap1{width:300px;height:300px;}
			.wrap1 .nav{position:relative;width:300px;height:50px;}
			.wrap1 .nav a{float:left;display:block;width:100px;height:50px;text-align:center;line-height:50px;color:#fff;}
			.wrap1 .nav a:nth-child(1){background:green;}
			.wrap1 .nav a:nth-child(2){background:yellow;}
			.wrap1 .nav a:nth-child(3){background:pink;}
			.wrap1 .section div{display:none;position:absolute;top:68px;left:0;width:300px;height:250px;background:green;}
			.wrap1 .section div:nth-child(1){width:300px;height:250px;background:green;}
			.wrap1 .section div:nth-child(2){width:300px;height:250px;background:yellow;}
			.wrap1 .section div:nth-child(3){width:300px;height:250px;background:pink;}
			.wrap1 .section div{display: none;}
			.wrap1 .section div:nth-child(1){display:block;}
			.wrap1 .section div:target{display: block;}  
			/*通过label标签的关联属性和input的单选类型实现相应div的显示*/
			.wrap1-two label{display:block;float:left;width:100px;height:50px;text-align:center;line-height:50px;}
			.wrap1-two{position:relative;}
			.wrap1-two label:nth-child(1){background-color:green;}
			.wrap1-two label:nth-child(2){background-color:yellow;}
			.wrap1-two label:nth-child(3){background-color:pink;}
			.wrap1-two label span{width:100px;height:50px;cursor:pointer;}
			.wrap1 label .item1-1{width:300px;height:250px;background:green;}
			.wrap1 label .item2-2{width:300px;height:250px;background:yellow;}
			.wrap1 label .item3-3{width:300px;height:250px;background:pink;}
			.wrap1-two label div{display:none;position:absolute;top:50px;left:0;width:300px;height:250px;}
			.wrap1-two label input{width:0;}
			.wrap1-two label input:checked+div{display:block;}
			/*原生js实现选项卡*/
			ul li{width:100px;height:50px;background-color:red;}
			#tab{float:left;width:300px;height:300px;border:1px solid #ccc;}
			#tab ul{width:300px;height:50px;background:#ccc}
			#tab li{float:left;}
			#tab li.on{background:#fff;}
			#tab .content{width:300px;height:250px;}
			#tab .content div{display:none;}
		</style>
	</head>
	<body>
		<!--a链接选项卡    锚点链接-->
		<div class="box1">
			<h2>a链接选项卡</h2>
			<div class="wrap1">
				<div class="nav">
					<a href="#item1">item1</a>
					<a href="#item2">item2</a>
					<a href="#item3">item3</a>
				</div>
				<div class="section">
					<div id="item1">item1</div>
					<div id="item2">item2</div>
					<div id="item3">item3</div>
				</div>
			</div>
		</div>
		
		<!--通过label标签的关联属性和input的单选类型实现相应div的显示-->
		<div class="box1">
			<h2>label标签实现选项卡</h2>
			<div class="wrap1 wrap1-two">
				<!--label标签里面的-->
				<label>
					<span>item1-1</span>
					<input type="radio" name="tab" checked />
					<div class="item1-1">item1-1</div>
				</label>
				<label>
					<span>item2-2</span>
					<input type="radio" name="tab" />
					<div class="item2-2">item2-2</div>
				</label>
				<label>
					<span>item3-3</span>
					<input type="radio" name="tab" />
					<div class="item3-3">item3-3</div>
				</label>
			</div>
		</div>

		<!--原生js实现选项卡-->
		<div class="box1">
			<h2>a链接选项卡</h2>
			<div id="tab">
				<ul id="card">
					<li class="on" tab="cnt1">选项卡1</li>
					<li tab="cnt2">选项卡2</li>
					<li tab="cnt3">选项卡3</li>
				</ul>
				<div class="content">
					<div style="display:block" id="cnt1">内容1</div>
					<div id="cnt2">内容2</div>
					<div id="cnt3">内容3</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/dom.js"></script>
		<script>
			/*--原生js实现Tab选项卡*/
			function id(id){
				return document.getElementById(id);
			};
			var cardDom = id("card");
			var liDoms = cardDom.children;
			var len = liDoms.length;
			for(var i=0;i<len;i++){
				liDoms[i].onclick = function(){
					this.className = "on";
					//同辈元素互斥
					siblings(this,function(){
						this.className = "";
					});
					//选项卡的id
					var tab = this.getAttribute("tab");
					//把对应的选项卡的内容显示出来
					var tabDom = id(tab);
					tabDom.style.display = "block";//document.getElementById(tab).style.display = "block";
					//拿它的父亲对象
					siblings(tabDom,function(){
						this.style.display = "none";
					});
				};
			}
			function siblings(dom,callback){
				var pdom = dom.parentElement;
				var tabArr = [].slice.call(pdom.children);
				tabArr.filter(function(obj){
					if(obj!=dom)callback.call(obj);
				});
			}
		</script>
		
	</body>
</html>
